<template>
    <div>
        SKUForm
        <br>
        {{spuName}}
        <br>
        {{skuForm}}

        <!--基本表单-->
            <el-form :model="skuForm" label-width="150px">

            <el-form-item label="spu名称">
                <span>{{ spuName }} </span>
            </el-form-item>

            <el-form-item label="sku名称">
                <el-input v-model="skuForm.skuName"/>
            </el-form-item>

            <el-form-item label="商品价格">
                <el-input v-model="skuForm.price"/>
            </el-form-item>

            <el-form-item label="商品重量（千克)">
                <el-input v-model="skuForm.weight"/>
            </el-form-item>

            <el-form-item label="商品规格描述">
                <el-input v-model="skuForm.skuDesc" :rows="5" type="textarea"/>
            </el-form-item>

        </el-form>

        <el-divider></el-divider>
        {{attrIdAttrValueIdList}}
        <!-- 属性名称-->
        <!-- 有了分类category3Id 查询到属性名称 -->
        <el-form :model="skuForm" :inline="true" label-width="150px" class="demo-form-inline">
            <el-form-item :key="attr.id" v-for="(attr,attrIndex) in attrInfoList" :label="attr.attrName">
                <el-select v-model="attrIdAttrValueIdList[attrIndex]" placeholder="请选择" @change="attrValueChange">
                <el-option
                v-for="attrValue in attr.attrValueList"
                :key="attrValue.id"
                :label="attrValue.valueName"
                :value="attr.id + '+' + attrValue.id">
                </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <!-- Sku图片 -->
         <el-table
            :data="spuImageList"
            style="width: 100%"
            @selection-change="spuImageListSelectionChange">
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="imgName"
                label="名称"
                width="180">
            </el-table-column>
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="imgUrl"
                label="URL">
                 <template slot-scope="scope_1">
                     <el-image
                        style="width: 100px; height: 100px"
                        :src="scope_1.row.imgUrl"></el-image>
                </template>
            </el-table-column>
            <el-table-column>
                 <template slot-scope="scope_1">
                     <el-button v-show="defaultSpuImageId != scope_1.row.id" type="primary" @click="setDefaultSkuImage(scope_1.row)">设置缺省</el-button>
                     <el-tag v-show="defaultSpuImageId == scope_1.row.id" >缺省</el-tag>
                </template>
            </el-table-column>
            
            </el-table>

            <!--按钮-->
            <div style="margin-top:22px;">
                <el-button type="primary" size="mini" @click="saveSkuInfo()">保存</el-button>
                <el-button type="default" size="mini" @click="backToSKuList()">返回</el-button>
            </div>

    </div>
</template>

<script>
import spuApi from '../../../api/product/spu.js'
import skuApi from '../../../api/product/sku.js'
import attrApi from '../../../api/product/attr.js'

export default {
    data(){
        return {
            attrIdAttrValueIdList:[],
            spuName:'',
            category1Id:'',
            category2Id:'',
            category3Id:'',
            skuForm:{
                spuId:'',//SPU id
                tmId:0,//品牌ID
                category3Id:0,//三级分类ID
                price:'',
                skuName:'',
                skuDesc:'',
                weight:0,
                skuImageList:[],
                skuDefaultImg:'',
                skuAttrValueList:[]
            },
            spuImageList:[],
            defaultSpuImageId:0,
            attrInfoList:[]
        }
    },
    methods:{
        init(spuId,spuName,tmId,category1Id,category2Id,category3Id){
            this.category1Id = category1Id;
            this.category2Id = category2Id;
            this.category3Id = category3Id;
            this.skuForm.spuId = spuId;
            this.spuName = spuName;
            this.skuForm.tmId = tmId;
            this.skuForm.category3Id = category3Id;

            this.getSpuImageList();
            this.getAttrInfoList();
        },
        getSpuImageList(){
            spuApi.getSpuImageList(this.skuForm.spuId).then(res=>{
                if(res.data.ok){
                    this.spuImageList = res.data.data;
                }
            })
        },
        spuImageListSelectionChange(selection){
            console.log(selection)
            this.skuForm.skuImageList = []
            selection.forEach(spuImage => {
                let skuImage = {
                    imgName:spuImage.imgName,
                    imgUrl:spuImage.imgUrl,
                    spuImgId:spuImage.id,
                    isDefault:0
                }
                this.skuForm.skuImageList.push(skuImage)
            });
        },
        setDefaultSkuImage(row){
            let spuImageId = row.id
            this.skuForm.skuImageList.forEach(skuImage=>{
                skuImage.isDefault = 0//取消缺省设置
                if(spuImageId === skuImage.spuImgId){
                    skuImage.isDefault = 1
                    this.defaultSpuImageId = spuImageId
                    this.skuForm.skuDefaultImg = skuImage.imgUrl
                }
            })
        },
        getAttrInfoList(){
            debugger
            attrApi.getAttrInfoList(this.category1Id,this.category2Id,this.category3Id).then(res=>{
                if(res.data.ok){
                    debugger
                    this.attrInfoList = res.data.data;
                }
            })
        },
        saveSkuInfo(){
             this.skuForm.skuAttrValueList = [];
            this.attrIdAttrValueIdList.forEach(element => {//element attrId + valueId
                let attrId_valueId = element.split("+");
                this.skuForm.skuAttrValueList.push({
                        attrId: attrId_valueId[0],
                        valueId:attrId_valueId[1]
                    }
                )
            });
            skuApi.saveSkuInfo(this.skuForm).then(res=>{
                alert(res.data.message)
            })

        },
        attrValueChange(){
            this.skuForm.skuAttrValueList = []
            this.attrIdAttrValueIdList.forEach(element => {//element attrId + valueId
                let attrId_valueId = element.split("+");
                this.skuForm.skuAttrValueList.push({
                        attrId: attrId_valueId[0],
                        valueId:attrId_valueId[1]
                    }
                )
            });
        }
    }
    
}
</script>
<style>

</style>

